<template>
    <!-- #ifdef H5 -->
    <th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }"
        :style="{ width: customWidth + 'px', 'text-align': align }">
        <view class="uni-table-th-row">
            <view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
                <slot></slot>
                <view v-if="sortable" class="arrow-box">
                    <text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>
                    <text class="arrow down" :class="{ active: descending }" @click.stop="descendingFn"></text>
                </view>
            </view>
            <dropdown v-if="filterType || filterData.length" :filterData="filterData" :filterType="filterType"
                      @change="ondropdown"></dropdown>
        </view>
    </th>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <view class="uni-table-th" :class="{ 'table--border': border }"
          :style="{ width: customWidth + 'px', 'text-align': align }">
        <slot></slot>
    </view>
    <!-- #endif -->
</template>

<script>
    import dropdown from './filter-dropdown.vue'

    /**
     * Th 表头
     * @description 表格内的表头单元格组件
     * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
     * @property {Number | String}    width    单元格宽度（支持纯数字、携带单位px或rpx）
     * @property {Boolean}    sortable                    是否启用排序
     * @property {Number}    align = [left|center|right]    单元格对齐方式
     * @value left    单元格文字左侧对齐
     * @value center    单元格文字居中
     * @value right        单元格文字右侧对齐
     * @property {Array}    filterData 筛选数据
     * @property {String}    filterType    [search|select] 筛选类型
     * @value search    关键字搜素
     * @value select    条件选择
     * @event {Function} sort-change 排序触发事件
     */
    export default {
        name: 'uniTh',
        options: {
            virtualHost: true
        },
        components: {
            dropdown
        },
        emits: ['sort-change', 'filter-change'],
        props: {
            width: {
                type: [String, Number],
                default: ''
            },
            align: {
                type: String,
                default: 'left'
            },
            rowspan: {
                type: [Number, String],
                default: 1
            },
            colspan: {
                type: [Number, String],
                default: 1
            },
            sortable: {
                type: Boolean,
                default: false
            },
            filterType: {
                type: String,
                default: ""
            },
            filterData: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        data() {
            return {
                border: false,
                ascending: false,
                descending: false
            }
        },
        computed: {
            // 根据props中的width属性 自动匹配当前th的宽度(px)
            customWidth() {
                if (typeof this.width === 'number') {
                    return this.width
                } else if (typeof this.width === 'string') {
                    let regexHaveUnitPx = new RegExp(/^[1-9][0-9]*px$/g)
                    let regexHaveUnitRpx = new RegExp(/^[1-9][0-9]*rpx$/g)
                    let regexHaveNotUnit = new RegExp(/^[1-9][0-9]*$/g)
                    if (this.width.match(regexHaveUnitPx) !== null) { // 携带了 px
                        return this.width.replace('px', '')
                    } else if (this.width.match(regexHaveUnitRpx) !== null) { // 携带了 rpx
                        let numberRpx = Number(this.width.replace('rpx', ''))
                        let widthCoe = uni.getSystemInfoSync().screenWidth / 750
                        return Math.round(numberRpx * widthCoe)
                    } else if (this.width.match(regexHaveNotUnit) !== null) { // 未携带 rpx或px 的纯数字 String
                        return this.width
                    } else { // 不符合格式
                        return ''
                    }
                } else {
                    return ''
                }
            },
            contentAlign() {
                let align = 'left'
                switch (this.align) {
                    case 'left':
                        align = 'flex-start'
                        break
                    case 'center':
                        align = 'center'
                        break
                    case 'right':
                        align = 'flex-end'
                        break
                }
                return align
            }
        },
        created() {
            this.root = this.getTable('uniTable')
            this.rootTr = this.getTable('uniTr')
            this.rootTr.minWidthUpdate(this.customWidth ? this.customWidth : 140)
            this.border = this.root.border
            this.root.thChildren.push(this)
        },
        methods: {
            sort() {
                if (!this.sortable) return
                this.clearOther()
                if (!this.ascending && !this.descending) {
                    this.ascending = true
                    this.$emit('sort-change', {order: 'ascending'})
                    return
                }
                if (this.ascending && !this.descending) {
                    this.ascending = false
                    this.descending = true
                    this.$emit('sort-change', {order: 'descending'})
                    return
                }

                if (!this.ascending && this.descending) {
                    this.ascending = false
                    this.descending = false
                    this.$emit('sort-change', {order: null})
                }
            },
            ascendingFn() {
                this.clearOther()
                this.ascending = !this.ascending
                this.descending = false
                this.$emit('sort-change', {order: this.ascending ? 'ascending' : null})
            },
            descendingFn() {
                this.clearOther()
                this.descending = !this.descending
                this.ascending = false
                this.$emit('sort-change', {order: this.descending ? 'descending' : null})
            },
            clearOther() {
                this.root.thChildren.map(item => {
                    if (item !== this) {
                        item.ascending = false
                        item.descending = false
                    }
                    return item
                })
            },
            ondropdown(e) {
                this.$emit("filter-change", e)
            },
            /**
             * 获取父元素实例
             */
            getTable(name) {
                let parent = this.$parent
                let parentName = parent.$options.name
                while (parentName !== name) {
                    parent = parent.$parent
                    if (!parent) return false
                    parentName = parent.$options.name
                }
                return parent
            }
        }
    }
</script>

<style lang="scss">
    $border-color: #ebeef5;

    .uni-table-th {
        padding: 12px 10px;
        /* #ifndef APP-NVUE */
        display: table-cell;
        box-sizing: border-box;
        /* #endif */
        font-size: 14px;
        font-weight: bold;
        color: #909399;
        border-bottom: 1px $border-color solid;
    }

    .uni-table-th-row {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
    }

    .table--border {
        border-right: 1px $border-color solid;
    }

    .uni-table-th-content {
        display: flex;
        align-items: center;
        flex: 1;
    }

    .arrow-box {
    }

    .arrow {
        display: block;
        position: relative;
        width: 10px;
        height: 8px;
        // border: 1px red solid;
        left: 5px;
        overflow: hidden;
        cursor: pointer;
    }

    .down {
        top: 3px;

        ::after {
            content: '';
            width: 8px;
            height: 8px;
            position: absolute;
            left: 2px;
            top: -5px;
            transform: rotate(45deg);
            background-color: #ccc;
        }

        &.active {
            ::after {
                background-color: #007aff;
            }
        }
    }

    .up {
        ::after {
            content: '';
            width: 8px;
            height: 8px;
            position: absolute;
            left: 2px;
            top: 5px;
            transform: rotate(45deg);
            background-color: #ccc;
        }

        &.active {
            ::after {
                background-color: #007aff;
            }
        }
    }
</style>
